<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
  <title>{$tdk['title']}</title>
  <meta name="description" content="{$tdk['description']}">
  <meta name="keywords" content="{$tdk['keywords']}">
  <meta name="author" content="alonez"/>
  <meta name="baidu-site-verification" content="code-mjNnJHp6FK"/>
  <link rel="shortcut icon" href="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/favicon.ico">
  <link href="https://res.bestyoujia.com/common/third/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  <script src="https://res.bestyoujia.com/common/third/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://res.bestyoujia.com/common/third/layer/3.1.1/layer.js"></script>
  <style>

    @font-face {
      font-family: 'Alibaba PuHuiTi';
      font-display: swap;
      src: url('//at.alicdn.com/t/webfont_xxq0bd004k.eot'); /* IE9*/
      src: url('//at.alicdn.com/t/webfont_xxq0bd004k.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('//at.alicdn.com/t/webfont_xxq0bd004k.woff2') format('woff2'),
      url('//at.alicdn.com/t/webfont_xxq0bd004k.woff') format('woff'), /* chrome、firefox */
      url('//at.alicdn.com/t/webfont_xxq0bd004k.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('//at.alicdn.com/t/webfont_xxq0bd004k.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
    }

    body {
      max-width: 520PX;
      margin: 0 auto;
    }

    button {
      border: 0;
    }

    button:focus {
      outline: none;
    }

    button:active {
      opacity: .7;
    }

    ol, ul {
      list-style: none;
    }

    input {
      border: 0;
      height: .8rem;
      letter-spacing: 1px;
      font-size: .28rem;
      width: 6.2rem;
      border-radius: .06rem;
      padding-left: .1rem;
      margin-top: .32rem;
    }

    input:focus {
      outline: none;
    }

    ::-moz-placeholder {
      color: #999999;
      font-size: .28rem;
      letter-spacing: 1px;
    }

    ::-webkit-input-placeholder {
      color: #999999;
      font-size: .28rem;
      letter-spacing: 1px;
    }

    :-ms-input-placeholder {
      color: #999999;
      font-size: .28rem;
      letter-spacing: 1px;
    }

    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .logo > img {
      margin-top: .6rem;
      width: 3.2rem;
    }

    .title {
      font-family: 'Alibaba PuHuiTi';
      font-weight: bold;
      color: #FFFFFF;
      font-size: .48rem;
      margin-top: .7rem;
    }

    .avatar-wrap {
      margin-top: .8rem;
    }

    .avatar-bg {
      width: 5.43rem;
      height: 5.5rem;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url("https://res.bestyoujia.com/web/ZMYJ/wxreply/1.png");
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .avatar-bg > img {
      width: 1.8rem;
      height: 1.8rem;
      margin-left: .15rem;
      margin-top: .1rem;
      border-radius: 50%;
      border: 1px #ffffff solid;
    }

    .img-fit {
      display: block;
      max-width: 100%;
      height: auto;
    }

    .content{
      width: 92%;
      display: flex;
      margin-top: .3rem;
      flex-wrap: wrap;
    }
    .content > .item{
      width: calc(100% / 2);
      margin-top: .3rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .content > .item > img {
      width: 1.8rem;
    }

    .content > .item > .check-img {
      position: absolute;
      width: .4rem;
      height: .4rem;
      right: .85rem;
      top: 1.43rem;
    }

    .content > .item > p {
      font-family: 'Alibaba PuHuiTi';
      color: #ffffff;
      font-size: .3rem;
      font-weight: 400;
      margin-top: .2rem;
    }

    .show {
      display: block;
    }

    .hide {
      display: none;
    }

    .order {
      border: 0;
      height: .8rem;
      letter-spacing: 1px;
      font-size: .3rem;
      width: 6.3rem;
      border-radius: .06rem;
      padding-left: .1rem;
      margin-top: .32rem;
      font-family: 'Alibaba PuHuiTi';
      color: #ffffff;
      background: #D74243;
    }

    .fixed-bottom {
      position: fixed;
      width: 100%;
      bottom: 0;
      z-index: 1;
      color: #ffffff;
    }

    @keyframes pulse {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }

      50% {
        -webkit-transform: scale3d(1.3, 1.3, 1.3);
        transform: scale3d(1.3, 1.3, 1.3);
      }

      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
  </style>
  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?40c4a0b79991b779265eef34e4be9d02";
      const s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</head>
<body>

{include file="public/qrcode_tips" /}

<!--<section class="container" style="background-image: url(https://res.bestyoujia.com/web/ZMYJ/wxreply/bj.jpg);-->
<!--background-size: cover;">-->
<!--  <div class="logo">-->
<!--    <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/logo.png" alt=""/>-->
<!--  </div>-->
<!--  <div class="title">N对1个性化定制“ni”的家</div>-->
<!--  <div class="avatar-wrap">-->
<!--    <div class="avatar-bg">-->
<!--      <img class="img-fit" src="{$userInfo['headimgurl']}" alt=""/>-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="title">请选择您的房屋需求</div>-->
<!--  <div style="display: flex; justify-content: center; align-items: center">-->
<!--    <div class="content">-->
<!--      <div class="item">-->
<!--        <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/2_1.png" alt="" />-->
<!--        <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/sel.png" alt="" />-->
<!--        <img class="check-img unsel" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/unsel.png" alt="" />-->
<!--        <p>精装房改造</p>-->
<!--      </div>-->
<!--      <div class="item">-->
<!--        <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/2_2.png" alt="" />-->
<!--        <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/sel.png" alt="" />-->
<!--        <img class="check-img unsel" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/unsel.png" alt="" />-->
<!--        <p>软装设计</p>-->
<!--      </div>-->
<!--      <div class="item">-->
<!--        <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/2_3.png" alt="" />-->
<!--        <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/sel.png" alt="" />-->
<!--        <img class="check-img unsel" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/unsel.png" alt="" />-->
<!--        <p>全屋定制</p>-->
<!--      </div>-->
<!--      <div class="item">-->
<!--        <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/2_4.png" alt="" />-->
<!--        <img class="check-img sel" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/sel.png" alt="" />-->
<!--        <img class="check-img unsel" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/unsel.png" alt="" />-->
<!--        <p>家具软饰</p>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--  <div id="form-container" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: .2rem; margin-bottom: 1.2rem">-->
<!--    <input id="customer" placeholder="*输入您的姓名，方便称呼您">-->
<!--    <input id="mobile" type="number" placeholder="*输入电话，预约设计大咖">-->
<!--    <button class="order">立即获取</button>-->
<!--    <div style="margin: .3rem auto .4rem">-->
<!--      <div style="-->
<!--font-size: .24rem;-->
<!--font-family: Alibaba PuHuiTi;-->
<!--font-weight: 500;-->
<!--color: #FFFFFF;text-align: center">-->
<!--        已有-->
<!--        <span id="num" style="color: #D74243">{$num}</span>-->
<!--        人成功获取-->
<!--      </div>-->
<!--      <div style="width: 100vw;text-align: center;-->
<!--      margin-top: .05rem;-->
<!--font-size: .18rem;-->
<!--font-family: 'Alibaba PuHuiTi';-->
<!--font-weight: 400;-->
<!--color: #FFFFFF;">*为了您的权益 您的隐私将被严格保密</div>-->
<!--    </div>-->
<!--  </div>-->
<!--</section>-->

<!--<section class="fixed-bottom">-->
<!--  <div id="jump-btn" style="display: flex;align-items: center;justify-content: center; max-width: 520px;-->
<!--  width: 100%;font-size: .3rem;-->
<!--height: .85rem; color: #ffffff;font-family: 'Alibaba PuHuiTi';-->
<!--font-weight: bold;-->
<!--background: #D74243;"><span>0元报价 · 免费量房</span><img class="animate__animated animate__pulse animate__infinite" style="width: .42rem; margin-left: .08rem" alt="" src="https://res.bestyoujia.com/web/ZMYJ/wxreply/hand.png"></div>-->
<!--  <div style="height: .5rem;width: 100%;background: #ffffff;text-align: center;line-height: .5rem;-->
<!--font-size: .14rem;-->
<!--font-family: Alibaba PuHuiTi;-->
<!--font-weight: 400;-->
<!--color: #797878; max-width: 520px">*为了您的权益，您的隐私将被严格保密</div>-->
<!--</section>-->

<script src="https://res.bestyoujia.com/common/third/js.cookie/2.2.1/js.cookie.min.js"></script>
<script src="https://res.bestyoujia.com/common/assets/js/appointment.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://res.bestyoujia.com/common/assets/js/wxShare.js"></script>
<script apikey="cf53b0089a6ec8a16b010417d7fc3f2c2624dd10819ea75680d16cec44758f93"
        crossorigin="anonymous" src="https://js.fundebug.cn/fundebug.2.0.0.min.js"></script>
<script src="https://js.fundebug.cn/fundebug.revideo.0.6.0.min.js"></script>
<script type="text/javascript">
  initWxShare('0元报价 · 拎包入住', '{$tdk["description"]}');

  (function (n, e) {
    const t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize", d = function () {
      let n = t.clientWidth;
      if(n > 520) {
        n = 520;
      }
      n && (t.style.fontSize = n / 7.5 + "px")
    };
    n.addEventListener && (e.addEventListener(i, d, !1));
    n.addEventListener && n.addEventListener("DOMContentLoaded", d, !1);
  })(document, window);

  Array.prototype.remove = function (val) {
    const index = this.indexOf(val);
    if (index > -1) {
      this.splice(index, 1);
    }
  };

  $('#jump-btn').on('click', function () {
    $('html,body').animate({scrollTop:$('#form-container').offset().top - 50}, 300);
  });

  const styleArr = [];
  $('.content > .item').each(function(i, e){
    let isChecked = false;
    $(e).on('click', function () {
      if(isChecked) {
        isChecked = false;
        onHide($(this));
        styleArr.remove($(this).find('p').text());
      }else{
        isChecked = true;
        onShow($(this));
        styleArr.push($(this).find('p').text());
      }
    });
  });

  function onShow(e) {
    e.find('.sel').removeClass('hide');
    e.find('.unsel').removeClass('show');
    e.find('.sel').addClass('show');
    e.find('.unsel').addClass('hide');
  }

  function onHide(e) {
    e.find('.sel').removeClass('show');
    e.find('.unsel').removeClass('show');
    e.find('.unsel').removeClass('hide');
    e.find('.sel').addClass('hide');
    e.find('.unsel').addClass('show');
  }

  $('.order').on('click', function (e) {
    window.page_position = '微信报名';
    if(styleArr.length === 0){
      layer.msg('请至少选择一项房屋需求', {
        icon: 5,
        time: 1200
      });
      return;
    }
    if(!$('#customer').val()) {
      showWarnTips('请输入您的姓名', '#customer');
      return;
    }
    const mobile = $('#mobile').val();
    const mobile_result = validMobile(mobile);
    switch (mobile_result) {
      case 0:
        showWarnTips('请输入正确的手机号', '#mobile');
        break;
      case 1:
        let remark = '';
        const nickname = "{$userInfo['nickname']}" || "";
        const openid = "{$userInfo['openid']}" || "";
        remark += `房屋需求:${styleArr.join('|')};微信昵称:${nickname};openid:${openid}`;
        const data = { customer: $('#customer').val(), mobile, remark };
        doAppointment(data, function(res) {
          console.log('onAppointmentSuccess', res);
          const { data = '' } = res;
          if(data) {
            buryingPoint('APPOINTMENT', data);
            $.get("{$Request.root}/api/updateCountByCode?code=wxreply&count="+$('#num').text()+"&openid="+openid+"&mobile="+mobile, function (result) {
              $('#num').text(result);
            });
            $('#customer').val("");
            $('#mobile').val("");
            layer.msg('预约成功，稍后将向您致电', {
              icon: 6,
              time: 4000
            });
          }
        }, function(err) {
          console.log('onAppointmentError', err);
          $('#customer').val("");
          $('#mobile').val("");
          layer.msg('预约失败', {
            icon: 5,
            time: 1200
          });
        });
        break;
      case 2:
        showWarnTips('请输入手机号', '#mobile');
        break;
    }
  });

  /**
   * 1:正确，0:格式错误，2:未输入
   * @param number
   */
  function validMobile(number) {
    const isMob = /^1\d{10}$/;
    if (number == "") {
      return 2;
    }
    return isMob.test(number) ? 1 : 0;
  }

  /**
   * 显示提示
   * @param msg
   * @param dom
   */
  function showWarnTips(msg, dom) {
    layer.tips(msg, dom, {
      tips: [1, '#fa8c16'],
      time: 2000
    });
  }

  doStatistics('page', 'zmyj_wxreply', Cookies.get('visitor_id'));
</script>
</body>
</html>
